<!-- 优惠券 -->
<template>
    <div class="page has-navbar has-tabbar coupon" v-tabbar-menu-index="0">
        <von-header theme="light">
            <span slot="title">优惠券详情</span>
        </von-header>
        <!-- <div class="page-content">
            <scroll class="couponList"
                    :on-infinite="onInfinite">
                <item v-for="(item, index) in couponList" :key="index" @click.native="onItemClick( item.id )" class="couponItem">
                    <div class="couponInner">
                         <div class="info clearfix">
                            <div class="img left">
                                <img :src="item.logoURL" v-if="item.logoURL">
                            </div>
                            <div class="text left">
                                <div class="title title1">
                                    <span class="type" v-text="item.title"></span>
                                </div>
                                <div class="title title2">
                                    <span class="coupon-type" v-text="couponType[item.type]"></span>
                                    <span class="product-name" v-text="item.productName"></span>
                                </div>
                                <div class="expire-days">
                                    <span>有效日期:</span>
                                    <span style="color:#e66a6a;">{{ item.endTime | numberToAllDate('')}}</span>
                                    <span style="color:#e66a6a;">{{item.beginTime | numberToAllDate('')+'~'}}{{item.endTime | numberToAllDate('')}}</span>
                                </div>
                            </div> 
                        </div>
                        <div class="use-rules">
                            <div v-text="'使用规则：'+item.notice"></div>
                        </div>
                    </div>
                </item>
                
                <div v-if="!haveMore" slot="infinite" class="text-center">没有更多数据</div>
            </scroll>
        </div> -->
        <div id="couponModalBox" class="modal-backdrop hide">
            <div class="modal-backdrop-bg"></div>
            <div class="modal-wrapper">
                <div id="couponModal" class="modal slide-in-up">
                    <div class="bar bar-header bar-dark">
                        <h1 class="title">优惠券详情</h1>
                        <button class="button button-icon icon ion-ios-close-empty" @click="traggleModal"></button>
                    </div>
                    <scroll class="page-content">
                        <item class="couponName">
                            <div class="name" v-text="couponObj.title"></div>
                            <div class="productName" v-text="'抵用商品：'+couponObj.productName"></div>
                        </item>
                        <item class="couponDetailItem">
                            <span>店铺名称：</span>
                            <span class="right" v-text="couponObj.storeName"></span>
                        </item>
                        <item class="couponDetailItem">
                            <span>店铺地址：</span>
                            <span class="right" v-text="couponObj.storeAddress"></span>
                        </item>
                        <item class="couponDetailItem">
                            <span>优惠券类型：</span>
                            <span class="right" v-text="couponType[couponObj.type]"></span>
                        </item>
                        <item class="couponDetailItem">
                            <span>有效期限：</span>
                            <!-- <span class="right">{{couponObj.endTime | numberToAllDate('')}}</span> -->
                            <span class="right">{{couponObj.beginTime | numberToAllDate('')+'~'}}{{couponObj.endTime | numberToAllDate('')}}</span>
                        </item>
                        <div class="useRules">
                            <div class="title">使用规则：</div>
                            <div class="content" v-text="couponObj.notice"></div>
                        </div>
                        <div class="qrcode-box">
                            <div class="QRcode" id="QRcode"></div>
                            <p v-text="couponObj.code" class="code"></p>
                        </div>
                        <div style="padding: 0 20px;">
                            <button @click="clickShareBtn" class="button button-energized button-block">分享</button>
                        </div>
                    </scroll>
                </div>
            </div>
            <div class="shareBg" @click="showShareBg=false" v-if="showShareBg"></div>
        </div>
    </div>
</template>
<script>
import {API_BASE_URL} from "./../../../../urlConfig/index";
export default {
    props: ['openId'],
    data(){
        return {
            couponList: [], // 优惠券列表
            couponType: {
                'GET_ITEM_FREE': '商品抵用券'
            },
            couponObj: '',
            couponStatus: {
                "NORMAL":"正常",
                "CREATED":"已创建",
                "TAKEN":"已领取",
                "VERIFIED":"已核销",
                "EXPIRED":"已过期",
            },
            showShareBg: false, // 分享优惠券背景

            haveMore: true,

            pageSize: 20,
            curPage: 0,

            curId: '',
        }
    },
    methods: {
        onItemClick: function ( couponId ) {
            this.curId = couponId;
            this.$http.get(couponId+'/coupon-instance').then((res)=>{
                this.couponObj = res.data;
                document.getElementById('QRcode').innerHTML='';
                let qrcode = new QRCode("QRcode", {
                    text: res.data.code,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                });
                if ( this.couponObj.shareable ) {

                    this.share();
                } else {
                   
                }
                document.getElementById('couponModalBox').className = 'modal-backdrop active';
                setTimeout(()=>{
                    document.getElementById('couponModal').className = 'modal slide-in-up ng-enter ng-enter-active active';
                })
            });
        }
    
        
    },
    created: function () {
        let shareTitle = 'this.couponObj.title';
        let shareLink = API_BASE_URL+'wechat/member/share-coupon?id='+'this.curId';
        let imgUrl = 'this.couponObj.logoURL';
        let notice = '使用规则：'+'this.couponObj.notice';

         wx.onMenuShareTimeline({
                title: shareTitle,
                link: shareLink,
                imgUrl: imgUrl,
                trigger: function (res) {

                },
                success: function (res) {
                    $toast.show('分享成功', 2000).then(() => {})
                },
                cancel: function (res) {

                },
                fail: function (res) {
                    $toast.show('分享失败，请重新分享', 2000).then(() => {})
                }
            });
            //分享给朋友
            wx.onMenuShareAppMessage({
                title: shareTitle, // 分享标题
                desc: notice, // 分享描述
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    $toast.show('分享成功', 2000).then(() => {})
                },
                cancel: function () { 

                },
                fail: function (res) {
                    $toast.show('分享失败，请重新分享', 2000).then(() => {})
                }
            });
    },
    mounted(){

    },
}
</script>

<style lang="scss" scoped>
	@import "coupon";
</style>
